<!DOCTYPE html>
<html ng-app="planIndex" ng-cloak style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/lib/navbar/css/responsive-menu.css" rel="stylesheet">
    <link href="/lib/bootstrap-datetime/css/jquery.datetimepicker.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="/lib/angular-toastr/dist/angular-toastr.css"/>
    <link rel="stylesheet" href="/lib/angular-ui-select/dist/select.css">
    <link href="/css/style.css" rel="stylesheet">

    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/lib/jquery/jquery.cookie.min.js"></script>

    <script src="/lib/navbar/js/modernizr.min.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/modernizr-custom.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/responsive-menu.js" type="text/javascript"></script>

    <script src="/lib/angular/angular.js"></script>
    <script src="/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <script src="/lib/angular-ui-select/dist/select.js"></script>
    <script src="/js/directives.js"></script>
    <script src="/lib/bootstrap-datetime/js/jquery.datetimepicker.js"></script>
    <script src="/js/planIndexController.js"></script>

    <title>计划安排</title>
</head>
<body ng-controller="planIndexController" style="height: 100%">

<% include navbar %>

<div style="display: none" class="col-md-4 col-sm-4 margin-top">
    <div class="col-md-10 col-md-offset-1 big-panel">
        <div class="col-md-12 kick-padding-margin">
            <h2 class="group-head"><span>计划安排列表</span></h2>
        </div>

        <div class="">
            <div class="col-md-5 margin-top" style="padding-left: 0">
                <input type="text" id="start_date" class="form-control" ng-model="filter.p_name" placeholder="开始时间 大于">
            </div>
            <div class="col-md-5 margin-top" style="padding-left: 0">
                <input type="text" id="end_date" class="form-control" ng-model="filter.manager" placeholder="结束时间 小于">
            </div>

            <div class="col-md-2 margin-top" style="padding: 0">
                <button class="btn btn-primary pull-right" style="width: 100%" ng-click="searchList()">搜索</button>
            </div>
        </div>

        <div class="col-md-12 list-group kick-padding-margin" id="allPlans" style="margin-top:20px">
            <div class="list-group-item active" style="background-color: #5AD;color: #eee">
                <div class="col-md-10">计划安排名称</div>
                <div class="col-md-2" style="padding: 0">导出</div>
            </div>
        </div>
        <div class="col-md-12 margin-top">
            <a href="javascript:void(0)" ng-click="nextPage()" class="pull-right">下一页</a>
            <a href="javascript:void(0)" ng-click="previousPage()" class="pull-right" style="margin-right:20px;">上一页</a>
        </div>

    </div>
</div>

<div class="col-md-12 col-sm-12 margin-top" style="position: relative;left:0;">
    <div class="search-area big-panel-container">
        <input id="myRole" type="hidden" value="<%- user.role %>">

        <div class="col-md-12 big-panel">

            <div class="col-md-12 form-horizontal">
                <% var latest = true, editable = false;
                if(plan.status != 'latest'){
                    latest = false;
                %>
                <h2 class="group-head"><span>历史计划安排</span></h2>
                <% } else{
                    if (user.role == 'admin') {
                        editable = true;
                    }
                %>
                <h2 class="group-head"><span>当前计划安排</span></h2>
                <% } %>
                <span class="fa fa-angle-double-up fa-angle-double-down" id="expand-0"
                      style="position: relative;top:-30px;left:96%;z-index: 100" data-toggle="tooltip"
                      data-placement="left" title="展开 / 收起"></span>

                <div style="position: relative;top:-15px;padding-right: 40px;" id="prj-0">
                    <div class="form-group">
                        <label class="col-md-2 control-label" style="text-align: center">计划名称</label>
                        <input type="hidden" value="<%- plan.pl_id %>" id="pl_id"/>

                        <div class="col-md-5">
                            <input type="text" class="form-control" ng-model="plan.pl_name" id="pl_name"
                                   value="<%- plan.pl_name %>" <% if(!editable) { %>readonly
                                    <% } %>
                            />
                        </div>
                        <div class="col-md-5">
                            <% if(user.role == 'admin'){ %>
                            <button class="btn btn-primary pull-right" style="margin-left:10px;"
                                    onclick="window.location.href='/plan/add'">新建计划
                            </button>
                            <% } %>
                            <% if(user.role == 'manager' && latest) { %>
                            <button class="btn btn-primary pull-right" style="margin-left: 15px;"
                                    onclick="javascript:window.location.href='/plan/input'">更新计划
                            </button>
                            <% } %>
                            <a class="btn btn-danger pull-right"
                               target="_blank" href="/plan/export/<%- plan.pl_id %>">导出报表
                            </a>
                            <% if(editable) { %>
                            <button class="btn btn-info pull-right" style="margin-right:10px;"
                                    ng-click="savePlan()">保存更改
                            </button>
                            <% } %>
                            <button class="btn btn-warning pull-right" style="margin-right:15px;"
                                onclick="javascript:history.back();">&nbsp;&nbsp;<i class="fa fa-backward"></i>&nbsp;&nbsp;返回
                            </button>
                        </div>
                    </div>

                    <div class="form-group margin-top">
                        <label class="col-md-2 control-label" style="text-align: center">起止时间</label>

                        <div class="col-md-5">
                            <input type="text" class="form-control" ng-model="plan.start_date" id="start"
                                   value="<%- plan.start_date %>" <% if(!editable) { %>readonly
                                    <% } %>
                            />
                            <span style="position: relative;top:-27px;left:103%">~</span>
                        </div>
                        <div class="col-md-5">
                            <input type="text" class="form-control" ng-model="plan.end_date" id="end"
                                   value="<%- plan.end_date %>"
                                   <% if(!editable) { %>readonly
                                    <% } %>
                            />
                        </div>
                    </div>

                    <div class="form-group" style="position: relative;top:-15px;">
                        <label class="col-md-2 control-label" style="text-align: center">后续安排</label>

                        <div class="col-md-10">
                            <textarea ng-model="plan.next_plan" class="form-control" id="next"
                                      <% if(!editable) { %>readonly
                                    <% } %>
                            ><%- plan.next_plan %></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12" style="padding: 0 50px;">
                <ul class="nav nav-tabs">
                    <li class="change-type active"><a ng-click="findGroup('project')">按项目查看</a></li>
                    <li class="change-type"><a ng-click="findGroup('manager')">按研发组查看</a></li>
                    <li class="pull-right"><span class="fa fa-user"
                                                 style="padding-top: 15px;position: relative;left:-5px;color:#2a6496;font-weight: 700">&nbsp;&nbsp;总人力:
                            <span id="totals">00.00</span></span></li>
                </ul>
            </div>

            <div id="searchContent" class="col-md-12" style="padding:0 50px;">

                <div id="project-view" style="margin-bottom: 30px;">
                    <ul class="list-group">
                        <li class="list-group-item active" style="background-color: #2a6496;color:#bbb">
                            <div class="col-md-2 kick-padding-margin">项目名称</div>
                            <div class="col-md-3 kick-padding-margin">项目经理/研发组长</div>
                            <div class="col-md-2 kick-padding-margin">项目状态</div>
                            <div class="col-md-3 kick-padding-margin">起止时间</div>
                            <div class="col-md-1 kick-padding-margin">人月</div>
                            <div class="col-md-1 kick-padding-margin" data-toggle="tooltip"
                                 data-placement="left" id="toggleAll" title="展开 / 收起"><b>+/-</b></div>
                        </li>
                    </ul>
                </div>

                <div id="manager-view" style="margin-bottom: 30px;display: none;">
                    <ul class="nav nav-tabs team-tab"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function ($) {
        var menu = $('.rm-nav').rMenu({
            minWidth: '960px'
        });
    });
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $(".fa-angle-double-up").each(function () {
            $(this).on('click', function () {
                $(this).toggleClass("fa-angle-double-down");
                $("#prj-" + $(this).attr("id").split("-")[1]).toggle(300);
            });
        });

        $(".change-type").each(function () {
            $(this).click(function () {
                $(".change-type").each(function () {
                    $(this).removeClass("active");
                });
                $(this).addClass("active");
            })
        });

        $("#toggleAll").click(function () {
            var expand = true;
            $(".list-toggle").each(function () {
                if ($(this).css("display") !== "none") {
                    expand = false;
                }
            });
            if (expand) {
                if ($("#prj-0").css("display") != "none") {
                    $("#expand-0").toggleClass("fa-angle-double-down");
                    $("#prj-0").toggle(300);
                }
                $(".fa-angle-double-up").each(function () {
                    if ($(this).attr("id").split("-")[1] != 0) {
                        $(this).toggleClass("fa-angle-double-down");
                        $("#prj-" + $(this).attr("id").split("-")[1]).toggle(300);
                    }
                });
            } else {
                $(".fa-angle-double-up").each(function () {
                    if ($("#prj-" + $(this).attr("id").split("-")[1]).css("display") != "none" && $(this).attr("id").split("-")[1] != 0) {
                        $(this).toggleClass("fa-angle-double-down");
                        $("#prj-" + $(this).attr("id").split("-")[1]).toggle(300);
                    }
                });
            }
        });
    });
    function expand(id) {
        if ($("#prj-0").css("display") !== 'none') {
            $("#expand-0").click();
        }
        $("#expand-" + id).toggleClass("fa-angle-double-down");
        $("#prj-" + $("#expand-" + id).attr("id").split("-")[1]).toggle(300);
    }
</script>
</body>
</html>